<template>
	<view :class="[bodyClass]">
		<view v-if="option.layoutType < 6">
			<view :class="[viewClass]">
				<template v-if="option.layoutType > 2">
					<view :class="[layoutClass]" :style="[layoutFlowStyle]" v-for="(_goodsList, listIndex) in goodsFlowList" :key="listIndex">
						<layout-goods-item
							:customStyle="[goodsFlowStyle]"
							:info="item"
							:salesShow="salesShow"
							:buttonShow="buttonShow"
							:labelShow="labelShow"
							:option="goodsOption"
							:addIconStyle="addIconStyle"
							:carIconStyle="carIconStyle"
							:textButtonStyle="textButtonStyle"
							v-for="(item, index) in _goodsList"
							:key="`${item.id}-${index}`"
							@tapGoods="tapGoods(item)"
						></layout-goods-item>
					</view>
				</template>
				
				<template v-else>
					<layout-goods-item
						:customClass="[layoutClass]"
						:customStyle="[layoutStyle]"
						:info="item"
						:salesShow="salesShow"
						:buttonShow="buttonShow"
						:labelShow="labelShow"
						:option="goodsOption"
						:addIconStyle="addIconStyle"
						:carIconStyle="carIconStyle"
						:textButtonStyle="textButtonStyle"
						v-for="(item, index) in goodsList"
						:key="index"
						@tapGoods="tapGoods(item)"
					></layout-goods-item>
				</template>
			</view>
			<load-more v-if="hasReachBottom" :showLoad="showLoad"></load-more>
		</view>
		<scroll-view class="scroll" scroll-x="true" v-else-if="option.layoutType == 6">
			<layout-goods-item
				:customClass="[layoutClass]"
				:customStyle="[layoutStyle]"
				:info="item"
				:salesShow="salesShow"
				:buttonShow="buttonShow"
				:labelShow="labelShow"
				:option="goodsOption"
				:addIconStyle="addIconStyle"
				:carIconStyle="carIconStyle"
				:textButtonStyle="textButtonStyle"
				v-for="(item, index) in goodsList"
				:key="index"
				@tapGoods="tapGoods(item)"
			></layout-goods-item>
			<load-more v-if="hasReachBottom" :showLoad="showLoad"></load-more>
		</scroll-view>
		<swiper class="imageContainer" @change="handleChange" :previous-margin="swiperMargin" :next-margin="swiperMargin" circular v-else>
			<block v-for="(item, index) in goodsList" :key="index">
				<swiper-item class="swiperitem" :class="[currentItemId === `${index}` && 'activeSwiperitem']" :item-id="`${index}`">
					<layout-goods-item
						:customClass="[layoutClass]"
						:customStyle="[layoutStyle]"
						:info="item"
						:salesShow="salesShow"
						:buttonShow="buttonShow"
						:labelShow="labelShow"
						:option="goodsOption"
						:addIconStyle="addIconStyle"
						:carIconStyle="carIconStyle"
						:textButtonStyle="textButtonStyle"
						@tapGoods="tapGoods(item)"
					>
						<template #price>
							<view class="goods-price" v-show="currentItemId === `${index}` && option.priceShow">
								<view class="price fw-500 text-center" :style="[{ color: option.priceColor }]" v-if="option.priceShow">
									<text>{{ $unitEn }}</text>
									<text>{{ item.price }}</text>
								</view>
								<view class="sales" :style="[{ color: option.salesColor }]" v-if="salesShow">
									<text>{{ $t('common.销量') }}：</text>
									<text>{{ item.stockSold }}</text>
								</view>
							</view>
						</template>
					</layout-goods-item>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script lang="ts">
export default {
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
};
</script>

<script lang="ts" setup>
import { ref, computed, inject, nextTick, onMounted } from 'vue';
import { useLayoutGoodsCompoments } from '../hooks';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { getGoodsList,getPreferenceGoodsList } from '@/common/request/api';
import type { GoodsItem } from '@/common/request/api';

import layoutGoodsItem from './goods-item.vue';

import { homePageContextKey, userPageContextKey, layoutPageContextKey, storePageContextKey } from '@/token';

const props = withDefaults(
	defineProps<{
		storeId?: string;
		requestGoods?: boolean;
		requestAllGoods?: boolean;
		hasReachBottom?: boolean;
		updateGoods?: boolean;
		isGoodsLike?:boolean;
		option: {
			//商品列表类型 1手动添加的商品 2分类商品，应通过接口请求对应分类下的商品列表 3 分区商品，应通过接口请求对应分区下的商品列表
			goodsType: 1 | 2 | 3;
			goodsList: GoodsItem[];
			// 布局
			layoutType: 1 | 2 | 3 | 4 | 5 | 6 | 7;
			//是否显示商品标题
			titleShow: boolean;
			//商品标题文本颜色
			titleColor: string;
			//是否显示商品价格
			priceShow: boolean;
			//商品价格文本颜色
			priceColor: string;
			//是否显示划线原价
			scribeShow: boolean;
			//划线原价文本颜色
			scribeColor: string;
			//是否显示商品销量
			salesShow: boolean;
			//商品销量文本颜色
			salesColor: string;
			//是否显示购物车按钮
			buttonShow: boolean;
			//购物车按钮样式类型，详见设计稿
			buttonType: 1 | 2 | 3 | 4;
			//购物车按钮文本 仅buttonType为1生效
			buttonText: string;
			//购物车按钮文本颜色 仅buttonType为1生效
			buttonTextColor: string;
			//购物车按钮圆角 仅buttonType为1生效
			buttonRadius: number;
			//购物车按钮背景颜色 仅buttonType为1生效
			buttonBackgroundColor: string;
			//图标颜色 仅buttonType为2生效
			addIconColor: string;
			//图标背景颜色是否为自定义 仅buttonType为2生效
			addIconBackgroundType: boolean;
			//自定义图标背景颜色 仅buttonType为2与addIconBackgroundType为true时生效
			addIconBackgroundColor: string;
			//图标颜色 仅buttonType为3生效
			carIconColor: string;
			//图标颜色 仅buttonType为4生效
			circularCarIconColor: string;
			//图标背景颜色是否为自定义 仅buttonType为4生效
			circularCarIconBackgroundType: boolean;
			//自定义图标背景颜色 仅buttonType为4与circularCarIconBackgroundType为true时生效
			circularCarIconBackgroundColor: string;
			//样式风格
			styleType: 0 | 1 | 2;
			//底色背景
			backgroundColor: string;
			//商品背景
			goodsBackgroundColor: string;
			//jump跳转商品详情 add加入购物车
			buttonEvent: 'jump' | 'add';
			// 商品边距
			goodsMargin: number;
			// 边距
			paddingTop: number;
			paddingBottom: number;
			paddingX: number;
			// 商品圆角
			goodsRadiusTop: number;
			goodsRadiusBottom: number;
			//活动角标 0不显示 1系统图标 2自定义
			signType: 0 | 1 | 2;
			//活动角标文本
			signText: string;
			// 对应活动角标，详见设计稿
			signIconName: 0 | 1 | 2;
			//自定义活动角标图片地址
			signIconUrl: string;
			// 商品分类
			goodsCategory?: {
				name: string;
				id: string;
			};
			// 商品分组
			subarea?: {
				name: string;
				id: string;
			};
			//显示的商品条数
			categoryGoodsNumber: number;
			//商品排序 1千人千面 2自定义排序
			categoryGoodsSort: 1 | 2;
			//自定义排序类型 1综合  2销量 3价格升序 4价格降序 5访问量
			categoryGoodsSortType: number;
			//为您推荐组件的商品说明显示控制
			explainShow?: boolean;
			// 为您推荐组件的商品说明文本颜色
			explainTextColor?: string;
			// 为您推荐组件的商品说明背景颜色
			explainBackgroundColor?: string;
		};
	}>(),
	{
		updateGoods: true,
		option: () => ({
			goodsType: 1,
			goodsList: [],
			layoutType: 1,
			titleShow: true,
			titleColor: 'rgba(48,49,51,1)',
			priceShow: true,
			priceColor: 'rgba(245,34,45,1)',
			scribeShow: true,
			scribeColor: 'rgba(192,196,204,1)',
			salesShow: true,
			salesColor: 'rgba(192,196,204,1)',
			buttonShow: true,
			buttonType: 1,
			buttonText: '',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			buttonRadius: 4,
			buttonBackgroundColor: 'rgba(245,34,45,1)',
			addIconColor: 'rgba(255, 255, 255, 1)',
			addIconBackgroundType: true,
			addIconBackgroundColor: 'rgba(245,34,45,1)',
			carIconColor: 'rgba(245,34,45,1)',
			circularCarIconColor: 'rgba(255, 255, 255, 1)',
			circularCarIconBackgroundType: true,
			circularCarIconBackgroundColor: 'rgba(245,34,45,1)',
			styleType: 0,
			backgroundColor: '',
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			buttonEvent: 'jump',
			goodsMargin: 7,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			goodsRadiusTop: 0,
			goodsRadiusBottom: 0,
			signType: 0,
			signText: '',
			signIconName: 0,
			signIconUrl: '',
			categoryGoodsNumber: 10,
			categoryGoodsSort: 1,
			categoryGoodsSortType: 1
		})
	}
);

const goodsOption = computed(() => {
	return {
		layoutType: props.option.layoutType,
		titleShow: props.option.titleShow,
		titleColor: props.option.titleColor,
		priceShow: props.option.priceShow,
		priceColor: props.option.priceColor,
		scribeShow: props.option.scribeShow,
		scribeColor: props.option.scribeColor,
		salesShow: props.option.salesShow,
		salesColor: props.option.salesColor,
		buttonShow: props.option.buttonShow,
		buttonType: props.option.buttonType,
		buttonText: props.option.buttonText,
		carIconColor: props.option.carIconColor,
		goodsBackgroundColor: props.option.goodsBackgroundColor,
		signType: props.option.signType,
		signText: props.option.signText,
		signIconName: props.option.signIconName,
		signIconUrl: props.option.signIconUrl,
		explainShow: props.option.explainShow,
		explainTextColor: props.option.explainTextColor,
		explainBackgroundColor: props.option.explainBackgroundColor
	};
});

const ctx = useCurrentInstance();

let requestParams: {
	 storeId?:string
	  categoryId?:string
	  subareaId?:string
	  orderByColumn?:'stockSold' | 'price'
	  isAsc?:'desc' | 'asc' | ''
} = {
	storeId: props.storeId,
	categoryId: props.option.goodsType == 2 ? props.option.goodsCategory?.id : undefined,
	subareaId: props.option.goodsType == 3 ? props.option.subarea?.id : undefined
};

let sortType = props.option.categoryGoodsSortType;
if (sortType > 1 && props.option.categoryGoodsSort == 2) {
	requestParams['orderByColumn'] = sortType == 2 ? 'stockSold' : 'price';
	requestParams['isAsc'] = sortType == 3 ? 'asc' : 'desc';
}

const { showLoad, list, handleQueryPage, handleRefresh } = useQueryPage({
	api: props.isGoodsLike ? getPreferenceGoodsList : getGoodsList,
	option: {
		params: requestParams
	},
	pageSize: props.option.categoryGoodsNumber
});

const _option = computed(() => {
	return props.hasReachBottom || props.requestGoods ? { ...props.option, goodsList: list } : props.option;
});

const {
	viewClass,
	bodyClass,
	layoutClass,
	layoutStyle,
	layoutFlowStyle,
	goodsFlowStyle,
	swiperMargin: _swiperMargin,
	textButtonStyle,
	addIconStyle,
	carIconStyle,
	goodsList,
	goodsFlowList,
	tapGoods
} = useLayoutGoodsCompoments(ctx, _option.value, props.updateGoods);

const homePageContext = inject(homePageContextKey);
const userPageContext = inject(userPageContextKey);
const layoutPageContext = inject(layoutPageContextKey);
const storePageContext = inject(storePageContextKey);

uni.$on('onHomePageReachBottom', function () {
	// homePageContext有contextId，代表当前组件是在home页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	console.log(6,homePageContext?.contextId,props.hasReachBottom)
	if (homePageContext?.contextId && props.hasReachBottom) {
		handleQueryPage();
	}
});
uni.$on('onUserPageReachBottom', function () {
	// userPageContext有contextId，代表当前组件是在user页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	if (userPageContext?.contextId && props.hasReachBottom) {
		handleQueryPage();
	}
});
uni.$on('onLayoutPageReachBottom', function () {
	// layoutPageContext有contextId，代表当前组件是在layout或preview页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	if (layoutPageContext?.contextId && props.hasReachBottom) {
		handleQueryPage();
	}
});
uni.$on('onStorePageReachBottom', function () {
	// storePageContext有contextId，代表当前组件是在store或privateHome页面下渲染的，
	// 同时组件需开启hasReachBottom属性，代表可以触底加载更多商品
	if (storePageContext?.contextId && props.hasReachBottom) {
		handleQueryPage();
	}
});

const labelShow = computed(() => {
	return [1, 2, 4].includes(props.option.layoutType);
});

const salesShow = computed(() => {
	return labelShow.value && props.option.salesShow;
});
const buttonShow = computed(() => {
	return labelShow.value && props.option.buttonShow;
});

const currentItemId = ref('0');
const swiperMargin = ref('0');
const handleChange = (e: { detail: { currentItemId: string } }) => {
	currentItemId.value = e.detail.currentItemId;
};

const layoutComponentsGetGoodsList = () => {
	if (props.requestAllGoods || props.option.goodsType == 2 || props.option.goodsType == 3) {
		handleRefresh();
	}
};

props.requestGoods && layoutComponentsGetGoodsList();

onMounted(() => {
	// #ifndef MP-WEIXIN||MP-ALIPAY
	swiperMargin.value = _swiperMargin.value;
	// #endif
	// #ifdef MP-WEIXIN||MP-ALIPAY
	nextTick(() => {
		// 小程序下需延迟设置swiperMargin，防止swiper因为circular而没有渲染最后一项元素
		setTimeout(() => {
			swiperMargin.value = _swiperMargin.value;
		}, 200);
	});
	// #endif
});
</script>

<style lang="scss">
@import '@/components/list/css/layoutGoods.scss';
@import '@/components/list/css/layoutCommon.scss';
</style>
